<template>
  <view :class="['vh100', { dark: theme == 'dark' }]">
    <view class="plr15 ptb30 bgPart">
      <view class="flex alcenter mb20">
        <view
          class="bd_input ptb10 plr10 tc flex1 radius4"
          @click="showP = true"
        >
          <view class="flex between"
            ><!-- <text>{{$t('bind.cur_select')}}</text> -->
            <text>{{ $t('assets.cur_coin') }}</text>
            <text>{{ symbol }}</text></view
          >
        </view>
        <u-picker
          mode="selector"
          :default-selector="[0]"
          :confirm-text="confirmText"
          :cancel-text="cancelText"
          v-model="showP"
          :range="coinArr"
          @confirm="getSymbol"
          range-key="symbols"
        >
        </u-picker>
        <!-- <picker class="bd_input ptb10 plr10 tc flex1 radius4" :value="symbol" :range="coinArr" @change="getSymbol" range-key="symbols">

				</picker> -->
      </view>
      <view class="flex alcenter between bd2f">
        <view class="flex alcenter pl15 flex1">
          <view class="flex column alcenter">
            <text class="wt5 h5 radius50p bgBlue"></text>
            <view class="h20 mt5 mb5 bdl2f"></view>
            <text class="wt5 h5 radius50p bgred"></text>
          </view>
          <view class="ml10 flex1">
            <view class="h40 lh40 bdb2f flex alcenter"
              ><text class="blue pr10">{{ $t('assets.from') }}</text>
              <picker
                class="bd_input ptb10 plr10 tc flex1 radius4"
                :value="assetsFromType"
                :range="getFromArr"
                @change="selectFrom"
                range-key="name"
              >
                <view class="flex between">
                  <text>{{ assetsFromType.name }}</text></view
                >
              </picker>
            </view>
            <u-gap
              height="40"
              bg-color=""
            ></u-gap>
            <view class="h40 lh40 flex alcenter"
              ><text class="blue pr10">{{ $t('assets.to') }}</text>
              <picker
                class="bd_input ptb10 plr10 tc flex1 radius4"
                :value="assetsToType"
                :range="getToArr"
                @change="selectTo"
                range-key="name"
              >
                <view class="flex between">
                  <text>{{ assetsToType.name }}</text></view
                >
              </picker>
            </view>
          </view>
        </view>
        <view class="plr15 h120 flex alcenter jscenter">
          <view
            class="wt30 h30 radius50p bggray flex alcenter jscenter"
            @tap="tapChange"
          >
            <image
              src="../../static/image/transfer1.png"
              class="wt30 h30"
            ></image>
          </view>
        </view>
      </view>
    </view>
    <!-- <view class="bgHeader h10"></view> -->
    <view
      class="mt10 plr15 bgPart pt20"
      style="min-height: 75vh"
    >
      <view class="">{{ $t('assets.transfernum') }}</view>
      <view class="flex alcenter between bdb1f mt10">
        <input
          type="digit"
          class="h40 flex1 input-uni"
          v-model="number"
          :placeholder="$t('assets.p_transfernum')"
        />
        <view class="flex alcenter">
          <text class="blue ft14 pr10 bdr_white50">{{ symbol || '--' }}</text>
          <view
            class="pl10"
            @tap="all"
            >{{ $t('trade.all') }}</view
          >
        </view>
      </view>
      <view class="mt10 blue ft12">
        {{ $t('trade.use') }}
        <text>{{ balance }}</text>
        {{ symbol }}
      </view>
      <view
        class="mt50 bgBlue radius4 ptb10 white ft14 tc mb10"
        @tap="transfer"
        >{{ $t('assets.transfer') }}</view
      >
    </view>
  </view>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import { commonAllCoin, convertPage, convert } from '../../common/apiString.js';

import { myMixins } from '@/common/myMixins.js';
export default {
  mixins: [myMixins],
  data() {
    return {
      showP: false,
      confirmText: this.$t('login.c1'),
      cancelText: this.$t('login.c2'),
      number: '',
      name: '',
      coinInfo: {},
      changeName: [
        this.$t('assets.leveracc'),
        this.$t('assets.tradeacc'),
        this.$t('assets.legalacc')
      ],
      changeType: ['lever', 'change', 'legala'],
      type: 0, //OTC币
      hasChange: 0,
      animateTab1: '',
      animateTab2: '',
      currencylever: {},
      currencyTrade: {},
      balance: '',
      wallet_id: '',
      getTotalArr: [],
      getFromArr: [],
      getToArr: [],
      coinArr: [],
      assetsFromType: {},
      assetsToType: {},
      symbol: ''
    };
  },
  computed: {
    ...mapState({
      theme: state => state.theme
    }),
    getTotal() {
      var arr = [
        { value: 'WALLET', name: this.$t('assets.wallet') },
        { value: 'CONTRACT', name: this.$t('assets.lever') },
        { value: 'LEGAL', name: this.$t('assets.legal') },
        // { value: 'CURRENCY', name: this.$t('assets.trade') },
		// { value: 'ROBOT', name: this.$t('bico.W823') },
        // { value: 'insurance', name: this.$t('assets.lever4') },
        { value: 'OPTION', name: this.$t('assets.option') },
        // { value: 'MINING', name: this.$t('assets.mine') }
      ];
      this.getTotalArr = arr;
      return arr;
    },
    getFrom() {
      var arr = [
        { value: 'WALLET', name: this.$t('assets.wallet') },
        { value: 'CONTRACT', name: this.$t('assets.lever') },
        { value: 'LEGAL', name: this.$t('assets.legal') },
        // { value: 'CURRENCY', name: this.$t('assets.trade') },
        // { value: 'insurance', name: this.$t('assets.lever4') },
        { value: 'OPTION', name: this.$t('assets.option') },
        // { value: 'MINING', name: this.$t('assets.mine') }
      ];
      this.getFromArr = arr;
      return arr;
    },
    getTo() {
      var arr = [
        { value: 'CONTRACT', name: this.$t('assets.lever') },
        { value: 'LEGAL', name: this.$t('assets.legal') },
        // { value: 'CURRENCY', name: this.$t('assets.trade') },
		{ value: 'ROBOT', name: this.$t('bico.W823') },
        // { value: 'insurance', name: this.$t('assets.lever4') },

        { value: 'OPTION', name: this.$t('assets.option') },
        // { value: 'MINING', name: this.$t('assets.mine') }
      ];
      this.getToArr = arr;
      return arr;
    },
    getFromValue() {
      return this.form.fromValue;
    }
  },
  watch: {
    /* 使用watch来响应数据的变化 */
    assetsFromType(newVal, oldVal) {
      console.log('最新值是：', newVal, '原来的值是：', oldVal);
      //更新钱包数据，以及 币种信息
      this.getCoinInfo();
      this.uploadInfo();
    },
    assetsToType(newVal, oldVal) {
      console.log('最新值是：', newVal, '原来的值是：', oldVal);
      var that = this;
      if (
        that.assetsToType.value == 'OPTION' ||
        that.assetsToType.value == 'CONTRACT' ||
        that.assetsFromType.value == 'OPTION' ||
        that.assetsFromType.value == 'CONTRACT'
      ) {
        this.coinArr = [];
        this.coinArr.push({ symbols: 'USDT' });
        this.symbol = 'USDT';
        this.uploadInfo();
      } else {
        this.getCoinInfo();
      }
    }
  },
  onLoad(e) {
    this.name = e.name;
    uni.setNavigationBarTitle({
      title: this.$t('bico.W112')
    });
    this.$utils.setTheme(this.theme);
    //this.getList()
    //this.getCoinInfo()
  },
  created() {
    var that = this;
    that.assetsFromType = that.getFrom[0];
    that.assetsToType = that.getTo[0];
  },
  onPullDownRefresh() {
    //this.getList()
    this.getCoinInfo();
  },
  methods: {
    uploadInfo() {
      if (this.symbol == undefined || this.symbol == '') {
        return;
      }
      var dto = {
        type: this.symbol,
        from: this.assetsFromType.value,
        contractType: 1
      };
      this.$utils.initDataToken({ url: convertPage, data: dto, type: 'get' }, res => {
        this.balance = res.price;
        //this.symbol = this.coinArr[0].symbols
        //this.getUserInfo();
      });
    },
    selectFrom(e) {
      //选择from e.target.value
      var that = this;
      that.assetsFromType = that.getFromArr[e.target.value];
      var value = that.assetsFromType.value;
      var filtered = that.getTotal.filter(function (element) {
        return element.value != that.assetsFromType.value;
      });
      that.getToArr = filtered;
      if (value == that.assetsToType.value) {
        that.assetsToType = filtered[0];
      }
    },
    selectTo(e) {
      //选择To e.target.value
      var that = this;
      that.assetsToType = that.getToArr[e.target.value];
      var value = that.assetsToType.value;
      var filtered = that.getTotal.filter(function (element) {
        return element.value != that.assetsToType.value;
      });
      that.getFromArr = filtered;

      if (value == that.assetsFromType.value) {
        that.assetsFromType = filtered[0];
      }
    },
    //获取币种
    getCoinInfo() {
      var that = this;
      if (
        that.assetsToType.value == 'OPTION' ||
        that.assetsToType.value == 'CONTRACT' ||
        that.assetsFromType.value == 'OPTION' ||
        that.assetsFromType.value == 'CONTRACT'
      ) {
        this.coinArr = [];
        this.coinArr.push({ symbols: 'USDT' });
        this.symbol = 'USDT';
        return;
      }
      if (that.assetsToType.value == 'LEGAL' || that.assetsFromType.value == 'LEGAL') {
        this.$utils.initDataToken({ url: 'contractOptionConfig', data: {}, type: 'POST' }, res => {
          this.coinArr = [];
          res.forEach(item => {
            this.coinArr.push({ symbols: item });
            this.symbol = item;
          });

          this.uploadInfo();
          //this.getUserInfo();
        });
        return;
      }

      this.$utils.initDataToken(
        { url: commonAllCoin, data: { type: 'CURRENCY' }, type: 'POST' },
        res => {
          this.coinArr = res;
          this.symbol = this.coinArr[0].symbols;
          res.forEach(item => {
            if (item.symbols == 'USDT') {
              this.symbol = item.symbols;
            }
          });

          this.uploadInfo();
          //this.getUserInfo();
        }
      );
    },
    //更换币种
    getSymbol(e) {
      this.symbol = this.coinArr[e[0]].symbols;
      this.uploadInfo();
    },
    //根据 当前钱包 获取 币种信息
    getAssetOfCoin() {},
    getList() {
      this.$utils.initDataToken({ url: 'wallet/list', type: 'POST' }, res => {
        uni.stopPullDownRefresh();
        // 获取法币余额和当前法币信息
        var lever_wallet = res.lever_wallet.balance;
        var selectlever_wallet = lever_wallet.filter(item => item.currency_name == this.name) || [];
        if (selectlever_wallet.length > 0) {
          this.currencylever = selectlever_wallet[0];
          if (this.type == 0) {
            this.balance = selectlever_wallet[0].lever_balance;
          }
          this.wallet_id = selectlever_wallet[0].id;
        }
        // 获取币币余额和当前币币信息
        var change_wallet = res.change_wallet.balance;
        var select_change_wallet =
          change_wallet.filter(item => item.currency_name == this.name) || [];
        if (select_change_wallet.length >= 0) {
          this.currencyTrade = select_change_wallet[0];
          if (this.type == 1) {
            this.balance = select_change_wallet[0].change_balance;
          }
        }
      });
    },
    tapChange() {
      var value = this.assetsFromType;
      this.assetsFromType = this.assetsToType;
      this.assetsToType = value;
      this.type = this.type == 0 ? 1 : 0;
    },
    all() {
      this.number = this.balance;
    },
    transfer() {
      // console.log(this.changeType[0],this.changeType[1])
      // return;
      if (!this.number) {
        return this.$utils.showLayer(this.$t('assets.p_transfernum'));
      }
      if (this.number > this.balance || this.number <= 0) {
        return this.$utils.showLayer(this.$t('assets.p_transfernumMustGl'));
      }

      this.$utils.initDataToken(
        {
          url: convert,
          type: 'get',
          data: {
            type: this.symbol,
            from: this.assetsFromType.value,
            to: this.assetsToType.value,
            numbers: this.number
          }
        },
        (res, msg) => {
          this.number = '';
          setTimeout(() => {
            this.$utils.showLayer(msg);
          }, 100);
          setTimeout(() => {
            this.uploadInfo();
          }, 500);
        }
      );
    }
  }
};
</script>

<style>
.animateUp {
  transform: translateY(-80upx);
  transition: all 0.5s;
}
.animateDown {
  transform: translateY(80upx);
  transition: all 0.5s;
}
.animateOff {
  transform: translateY(0);
  transition: all 0.5s;
}

uni-view {
  box-sizing: border-box;
  line-height: 1.8;
}
</style>
